<div class="modal-content"  ng-class="{ active: isCurrentTab('metadata') }" data-modal-tab-content="metadata" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <ul>
        <li>
          <div class="obj tbl-details">
            <header translate="USERS.ACLS.NEW.METADATA.TITLE"><!-- Name --></header>
            <div class="obj-container">
              <table class="main-tbl">
                <tr>
                  <td>{{ 'USERS.ACLS.NEW.METADATA.NAME.CAPTION' | translate }}<i class="required">*</i></td>
                  <td>
                    <input
                      class="hidden-input"
                      tabindex="1"
                      focushere
                      sanitize-xml="wizard.step.metadata.name"
                      ng-model="wizard.step.metadata.name"
                      placeholder="{{ 'USERS.ACLS.NEW.METADATA.NAME.PLACEHOLDER' | translate }}">
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="access" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <ul>
        <li>
          <div class="obj list-obj">
            <header class="no-expand" translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.TITLE">
              <!-- Title -->
            </header>
            <div class="obj-container">
              <div class="obj tbl-list">

                <table class="main-tbl">
                  <thead>
                    <tr>
                      <th translate="USERS.ACLS.NEW.ACCESS.TEMPLATES.TITLE"><!-- Templates --></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <div class="obj-container padded">
                          <p translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.DESCRIPTION">
                          <!-- Description -->
                          </p>
                          <select chosen pre-select-from="wizard.step.acls"
                                         data-width="'200px'"
                                         tabindex="1"
                                         focushere
                                         ng-change="wizard.step.changeBaseAcl(wizard.step.ud.id)"
                                         ng-model="wizard.step.ud.id"
                                         ng-options="id as name for (id, name) in wizard.step.acls"
                                         placeholder-text-single="'{{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.LABEL' | translate }}'"
                                         no-results-text="'{{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.EMPTY' | translate }}'"
                                         ></select>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="obj-container" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_USER_ROLES_VIEW')">
              <div class="obj tbl-list">
                <header translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.USERS">
                  <!-- Details -->
                </header>
                <div class="obj-container">
                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.USER">
                          <!-- Role -->
                        </th>
                        <th class="fit">
                          <!-- Read -->
                          {{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.READ' | translate }}
                          <span title="{{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.HELP.READ' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th class="fit">
                          <!--Write-->
                          {{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.WRITE' | translate }}
                          <span title="{{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.HELP.WRITE' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="wizard.step.hasActions">
                          <!--Additional Actions-->
                        </th>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                          <!--Action-->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="policy in wizard.step.ud.policiesUser">
                        <td>
                          <select chosen pre-select-from="users"
                                         call-on-search="wizard.step.getMatchingRoles"
                                         data-width="'360px'"
                                         ng-model="policy.role"
                                         ng-options="user.userRole as wizard.step.userToStringForDetails(user) for user in wizard.step.users"
                                         placeholder-text-single="'{{ 'USERS.ACLS.NEW.ACCESS.ROLES.LABEL' | translate }}'"
                                         no-results-text="'{{ 'USERS.ACLS.NEW.ACCESS.ROLES.EMPTY' | translate }}'"
                                         ></select>
                        </td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.read" ng-disabled="wizard.step.aclCreateDefaults['read_readonly']"/></td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.write" ng-disabled="wizard.step.aclCreateDefaults['write_readonly']"/></td>
                        <td class="fit editable" ng-if="wizard.step.hasActions"><div admin-ng-editable-multi-select mixed="false" params="policy.actions" collection="wizard.step.actions"> </div></td>
                        <td class="fit"><a ng-click="wizard.step.deletePolicy(wizard.step.ud.policiesUser, policy)"  class="remove"></a>
                        </td>
                      </tr>
                      <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')">
                        <td colspan="5"><a ng-click="wizard.step.addPolicy(wizard.step.ud.policiesUser)">+ {{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.NEW_USER' | translate }}</a></td>
                        <tr>
                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="obj-container" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_NONUSER_ROLES_VIEW')">
              <div class="obj tbl-list">
                <header translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.DETAILS">
                  <!-- Details -->
                </header>
                <div class="obj-container">
                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.ROLE">
                          <!-- Role -->
                        </th>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.READ" class="fit">
                          <!-- Read -->
                        </th>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                          <!--Write-->
                        </th>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="wizard.step.hasActions">
                          <!--Additional Actions-->
                        </th>
                        <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                          <!--Action-->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="policy in wizard.step.ud.policies">
                        <td>
                          <select chosen pre-select-from="wizard.step.roles"
                                         call-on-search="wizard.step.getMatchingRoles"
                                         data-width="'360px'"
                                         ng-model="policy.role"
                                         ng-options="role as role for role in wizard.step.roles | filter: wizard.step.filterUserRoles"
                                         placeholder-text-single="'{{ 'USERS.ACLS.NEW.ACCESS.ROLES.LABEL' | translate }}'"
                                         no-results-text="'{{ 'USERS.ACLS.NEW.ACCESS.ROLES.EMPTY' | translate }}'"
                                         ></select>
                        </td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.read" ng-disabled="wizard.step.aclCreateDefaults['read_readonly']"/></td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.write" ng-disabled="wizard.step.aclCreateDefaults['write_readonly']"/></td>
                        <td class="fit editable" ng-if="wizard.step.hasActions"><div admin-ng-editable-multi-select mixed="false" params="policy.actions" collection="wizard.step.actions"> </div></td>
                        <td class="fit"><a ng-click="wizard.step.deletePolicy(wizard.step.ud.policies, policy)" class="remove"></a>
                        </td>
                      </tr>
                      <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')">
                        <td colspan="5"><a ng-click="wizard.step.addPolicy(wizard.step.ud.policies)">+ {{ 'USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.NEW' | translate }}</a></td>
                        <tr>
                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="summary" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div data-admin-ng-notifications="" context="acl-form"></div>
      <div class="obj tbl-list">
        <header class="no-expand" translate="USERS.ACLS.NEW.METADATA.TITLE"><!-- Metadata --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <tr>
              <td translate="USERS.ACLS.NEW.METADATA.NAME.CAPTION"><!-- Name --></td>
              <td>{{ wizard.states[0].stateController.metadata.name }}</td>
              <tr>
          </table>
        </div>
      </div>

      <div class="obj tbl-list">
        <header class="no-expand" translate="USERS.ACLS.NEW.ACCESS.CAPTION" ><!-- Access Policy --></header>
        <table class="main-tbl">
          <thead>
            <tr>
              <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.ROLE" class="fit">
                <!-- Role -->
              </th>
              <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.READ" class="fit">
                <!-- Read -->
              </th>
              <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                <!-- Write -->
              </th>
              <th translate="USERS.ACLS.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="wizard.getStateControllerByName('access').hasActions">
                <!-- Additional Actions -->
              </th>
            </tr>
          </thead>
          <tr ng-repeat="policy in wizard.getStateControllerByName('access').getAllPolicies()">
            <td>{{ policy.role }}</td>
            <td class="fit"><input type="checkbox" disabled ng-model="policy.read"/></td>
            <td class="fit"><input type="checkbox" disabled ng-model="policy.write"/></td>
            <td class="fit" ng-if="wizard.getStateControllerByName('access').hasActions"><div ng-repeat="customAction in policy.actions.value">{{ customAction }}</div></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
